<template>
  <div class="hou">
    <div class="top">
      <span @click="quanbu" :class="id === -1 ? 'act' : ''">全部</span>
      <span
        v-for="(item, key) in $store.state.shouye.houduan.titleData"
        :key="key"
        @click="titleDataClick(key)"
        :class="id === key ? 'act' : ''"
        >{{ item.tag_name }}</span
      >
    </div>
    <div class="bottom">
      <div class="left">
        <div class="s">
          <span
            v-for="(item, key) in sxList"
            :key="key"
            :class="sId === key ? 'act' : ''"
            @click="sortData(key)"
            >{{ item }}</span
          >
        </div>
        <ul>
          <li
            v-for="(item, key) in $store.getters['shouye/houduan/filterData'][0]
              .data"
            :key="key"
          >
            <div class="shang">
              <p>{{ item.author_user_info.user_name }}</p>
              <p>{{ item.article_info.ctime }}</p>
              <p v-for="(item, key) in item.tags" :key="key">
                <span>{{ item.tag_name }}</span>
                <i class="xiao">/</i>
              </p>
            </div>
            <div class="zhong">
              {{ item.article_info.title }}
            </div>
            <div class="xia">
              <div @click="addDigg(item, key, id)">
                <img
                  class="xiaImg1"
                  src=""
                  alt=""
                />
                <span :style="item.num?'color:red':''">{{ item.article_info.digg_count }}</span>
              </div>
              <div>
                <img
                  class="xiaImg2"
                  src=""
                  alt=""
                />

                <span>{{ item.article_info.comment_count }} </span>
              </div>
            </div>
            <div class="absoImg">
              <img :src="item.article_info.cover_image" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: -1,
      sxList: ["热门", "最新", "热榜"],
      sId: 0, //控制热门、最新、热榜 高亮
    };
  },
  created() {
    console.log(this.$store);
  },
  methods: {
    //点击热门 最新 热榜
    sortData(key) {
      this.sId = key;
      this.$store.commit("shouye/houduan/changehouId", { key });
    },
    //点击全部、Java、后端筛选数据
    quanbu() {
      this.id = -1;
      this.sId = 0;
      this.$store.commit("shouye/houduan/changeId", { key: -1 });
    },
    titleDataClick(key) {
      this.id = key;
      this.sId = 0;
      this.$store.commit("shouye/houduan/changeId", { key });
    },
    //点赞功能
    addDigg(item, key, id) {
      console.log(item, key, id);
      this.$store.commit("shouye/houduan/addDigg", { id, key });
    },
  },
};
</script>

<style scoped lang="scss">
.hou {
  width: 100%;
  .top {
    width: 100%;
    height: 72px;
    margin: 15px 0;
    overflow: hidden;
    span {
      padding: 0 9px;
      height: 24px;
      line-height: 24px;
      background: #fff;
      border-radius: 24px;
      text-align: center;
      float: left;
      margin: 10px 12px 0 0;
      font-size: 14px;
      &:hover {
        color: #fff;
        background: #007fff;
      }
    }
    .act {
      background: #007fff;
      color: #fff;
    }
  }
  .bottom {
    width: 100%;
    overflow: hidden;
    .left {
      width: 700px;
      float: left;
      background: #fff;
      .s {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #f5f5f5;
        line-height: 40px;
        span {
          padding: 0 18px;
          &:hover {
            color: #007fff;
          }
        }
        .act {
          color: #007fff;
        }
      }
      ul {
        li {
          height: 115px;
          position: relative;
          width: 100%;
          padding-left: 20px;
          border-bottom: 1px solid #f5f5f5;
          .absoImg {
            position: absolute;
            right: 20px;
            top: 25px;
            width: 60px;
            height: 60px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .shang {
            padding: 20px 0 0 0px;
            font-size: 12px;
            margin-bottom: 10px;
            color: #bbc0ce;
            overflow: hidden;
            p {
              margin-right: 10px;
              float: left;
              i {
                padding: 0 0 0 10px;
              }
            }
            p:last-child {
              i {
                opacity: 0;
              }
            }
          }
          .zhong {
            width: 100%;
            font-size: 18px;
            color: #000;
            font-weight: bold;
            margin-bottom: 15px;
          }
          .xia {
            width: 100%;
            div {
              width: 50px;
              height: 25px;
              float: left;
              line-height: 25px;
              text-align: right;
              color: #b2bac2;
              border: 1px solid #eeeff0;
            }
            .xiaImg1 {
              float: left;
              margin: 4px 0 0 5px;
            }
            .xiaImg2 {
              float: left;
              margin: 3px 0 0 5px;
            }
            span {
              float: left;
              margin-left: 3px;
            }
          }
        }
      }
    }
    .right {
      width: 240px;
      float: right;
    }
  }
}
</style>
